<!--菜单6:
建筑能耗统计模块-->
<template>
    <div class="EnergyConsumption_container">
        <el-row :gutter="0" class = "EnergyConsumption_container1">
            <LayoutLeft title="汝阳县人民医院能耗统计图">
                <div class = "EnergyConsumption_content">
                    <!--数据展示区域 -->

                    <div class="EnergyConsumption_content_left">
                        <!--扇形图-->
                        <div id="energy-consumption-chart-1" class="EnergyConsumption_content_left_border EnergyConsumption_content_left_Fan">
                            扇形图
                        </div>
                        <!--表格-->
                        <div class="EnergyConsumption_content_left_table">
                            <p>建筑累计用电情况</p>
                            <div class="table">
                                <table cellpadding="0" cellspacing="0" border="1">
                                    <tr>
                                        <td>建筑总用电</td>
                                        <td v-text="table_data1[0].totalpower" colspan="2"></td>
                                    </tr>
                                    <tr>
                                        <td>用电分项</td>
                                        <td>所占比例</td>
                                        <td>用电量</td>
                                    </tr>
                                    <tr>
                                        <td>照明插座用电</td>
                                        <td v-text="table_data1[0].zm_bl"></td>
                                        <td v-text="table_data1[0].zm_ydl"></td>
                                    </tr>
                                    <tr>
                                        <td>空调用电</td>
                                        <td v-text="table_data1[0].kt_bl"></td>
                                        <td v-text="table_data1[0].kt_ydl"></td>
                                    </tr>
                                    <tr>
                                        <td>动力用电</td>
                                        <td v-text="table_data1[0].dl_bl"></td>
                                        <td v-text="table_data1[0].dl_ydl"></td>
                                    </tr>
                                    <tr>
                                        <td>特殊用电</td>
                                        <td v-text="table_data1[0].dl_bl"></td>
                                        <td v-text="table_data1[0].dl_ydl"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="EnergyConsumption_content_right">
                        <div id="energy-consumption-chart-2" class="EnergyConsumption_content_right_border EnergyConsumption_content_right_column">柱形图</div>
                        <div id="energy-consumption-chart-3" class="EnergyConsumption_content_right_border EnergyConsumption_content_right_column">柱形图</div>
                    </div>

                </div>
            </LayoutLeft>
            <LayoutRight title="能耗数据">
                <div class="block">
                    <span class="demonstration">&nbsp;&nbsp;&nbsp;年:&nbsp;&nbsp;&nbsp;</span>
                    <el-date-picker
                        v-model="value3"
                        type="year"
                        placeholder="选择年">
                    </el-date-picker>
                </div>
                <div class="block">
                    <span class="demonstration">&nbsp;&nbsp;&nbsp;月:&nbsp;&nbsp;&nbsp;</span>
                    <el-date-picker
                        v-model="value2"
                        type="month"
                        placeholder="选择月">
                    </el-date-picker>
                </div>
                <div class="block">
                    <span class="demonstration">&nbsp;&nbsp;&nbsp;日:&nbsp;&nbsp;&nbsp;</span>
                    <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </div>

                <div class="EnerguConsumption_detial">
                    <router-link to="/EnergyConsumptionDetial" class="link-style">
                        <button class="EnergyConsumption_button">
                            <img src="../../assets/img/detial.png"/>
                            <span>查看详细</span>
                        </button>
                    </router-link>
                </div>
            </LayoutRight>

        </el-row>
    </div>
</template>

<script>
    import LayoutRight from "@/components/Layout/LayoutRight";
    import LayoutLeft from "@/components/Layout/LayoutLeft";
    export default {
        components: {LayoutLeft, LayoutRight},
        data() {
            return {
                value1: '',
                value2: '',
                value3: '',
                value4: '',
                table_data1: [{         // 添加默认数据，防止报错导致图表无法加载
                    totalpower:"",
                    zm_bl:'',//照明插座用电比例
                    zm_ydl:'',//照明插座用电量
                    kt_bl:'',//空调用电比例
                    kt_ydl:'',//空调用电用电量
                    dl_bl:'',//动力用电比例
                    dl_ydl:'',//动力用电用电量
                    ts_bl:'',//特殊用电量比例
                    ts_ydl:"",//特殊用电 用电量
                }],
                pieChart: [335,443,155],
                barChart: [
                    [132,123,138,184,132,123,138,184,132,123,138,184,132,123,138,184,132,123,138],
                    [132,123,138,184,132,123,138,184,132,123,138,184,132,123,138,184,132,123,138],
                    [132,123,138,184,132,123,138,184,132,123,138,184,132,123,138,184,132,123,138]
                ],
                lineChart: [
                    [132,123,138,184,132,123,138,184,132,123,138,184,132,123,138,184,132,123,138],
                    [123,138,184,132,123,138,184,132,123,138,184,132,123,138,184,132,123,138,119],
                    [138,184,132,123,138,184,132,123,138,184,132,123,138,184,132,123,138,132,115]
                ]
            };
        },
        mounted(){
            this.EnergyConsumprtion_tableData();
            this.drawPieChart();
            this.drawBarChart();
            this.drawLineChart();
        },
        methods:{
            EnergyConsumprtion_tableData(){
                    this.axios.get('/api/module6/EnergyConsumprtiontableData').then(resp=>{
                        console.log(resp)
                        this.table_data1 = resp.data.list;
                    })
            },
            drawPieChart() {
                const chart = this.echarts.init(document.getElementById('energy-consumption-chart-1'));
                chart.setOption({
                    color: ['#2194EF', '#009933', '#CC6600'],
                    legend: {
                        left: 'center',
                        top: '5%',
                        data: ['动力用电', '科技用电', '其他用电']
                    },
                    title: {
                        text: '用电统计图',
                        x: 'center',
                        y: 'top',
                        top: '5',
                    },
                    series : [
                        {
                            name: '用电统计图',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: '70%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            labelLine: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontWeight: 'bold'
                                }
                            },
                            label: {
                                show: false,
                                // position: 'center'
                            },
                            avoidLabelOverlap: false,
                            data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                {value:this.pieChart[0], name:'动力用电'},
                                {value:this.pieChart[1], name:'科技用电'},
                                {value:this.pieChart[2], name:'其他用电'},
                            ]
                        }
                    ]
                })
            },
            drawBarChart() {
                const chart = this.echarts.init(document.getElementById('energy-consumption-chart-2'));
                chart.setOption({
                    color: ['#2194EF', '#009933', '#CC6600'],
                    title: {
                        text: '日电耗（单位：kWh）',
                        x: 'center',
                        y: 'top',
                    },
                    legend: {
                        type: 'scroll',
                        selectedMode: false,
                        x: 'center',
                        y: 'top',
                        padding: 30
                    },
                    tooltip: {},
                    xAxis: {
                        data: Array.from({length: 19}, (v, k) => k + 1)
                    },
                    yAxis: {
                        // minInterval: 5000,
                        // interval: 5000
                    },
                    grid: {
                        y: 90,
                        y2: 20
                    },
                    series: [ {
                        name: '用电量1',
                        type: 'bar',
                        stack: '用电量',
                        data: this.barChart[0]
                    }, {
                        name: '用电量2',
                        type: 'bar',
                        stack: '用电量',
                        data: this.barChart[1]
                    }, {
                        name: '用电量3',
                        type: 'bar',
                        stack: '用电量',
                        data: this.barChart[2]
                    }]
                })
            },
            drawLineChart() {
                const chart = this.echarts.init(document.getElementById('energy-consumption-chart-3'));
                chart.setOption({
                    color: ['#2194EF', '#009933', '#CC6600'],
                    title: {
                        text: '日电耗（单位：kWh）',
                        x: 'center',
                        y: 'top',
                    },
                    legend: {
                        type: 'scroll',
                        selectedMode: false,
                        x: 'center',
                        y: 'top',
                        padding: 30
                    },
                    tooltip: {},
                    xAxis: {
                        data: Array.from({length: 19}, (v, k) => k + 1)
                    },
                    yAxis: {
                        // minInterval: 5000,
                        // interval: 5000
                    },
                    grid: {
                        y: 90,
                        y2: 20
                    },
                    series: [ {
                        name: '用电量1',
                        type: 'line',
                        data: this.lineChart[0]
                    }, {
                        name: '用电量2',
                        type: 'line',
                        data: this.lineChart[1]
                    }, {
                        name: '用电量3',
                        type: 'line',
                        data: this.lineChart[2]
                    }]
                })
            }
        }
    };
</script>

<style scoped>
    .EnergyConsumption_container{
        height: 100%;
        width: 100%;
    }
    .EnergyConsumption_container1{
        height: 100%;
    }
    .EnergyConsumption_left{
        height: 100%;
    }
    .EnergyConsumption_content{
        box-sizing: border-box;
        height: 100%;
        /*background-color: #55a532;*/
        /*border:1px solid #000000;*/
        border-radius: 3px;
        display: flex;
        justify-content: center;
    }
    .EnergyConsumption_title{
        border: 1px solid #999999;
        display: flex;
        border-radius: 3px;
        justify-content: center;
        color: #25A0D9;
        height: 20px;
    }
    .EnergyConsumption_right {
        border: 1px solid #999999;
        border-radius: 3px;
        height: 100%;

    }
    .block{
        margin: 5px 10px;
    }
    .EnerguConsumption_detial{
        margin-top: 50px;
        display: flex;
        justify-content: center;
        max-width: 100%;
    }
    .EnergyConsumption_button{
        width: 150px;
        height: 100px;
        background-color: #ffffff;
        display: flex;
        border-radius: 7px;
        border-color: #25A0D9;
        justify-content: center;
        color: #25A0D9;
    }
    .EnergyConsumption_button:hover{
        color: red;
    }
    .EnergyConsumption_button img{
        width: 100px;
        height: 80px;
    }
    .EnergyConsumption_button span{
        margin-top: 25px;
    }
    .EnergyConsumption_content_left{
        width: 45%;
        height: 100%;
        display: flex;
        flex-direction: column;
        /*background-color: #25A0D9;*/
    }
    .EnergyConsumption_content_left .table{
        display: flex;
        justify-content: center;
    }
    .EnergyConsumption_content_right {
        /*background-color: #63a35c;*/
        width: 55%;
        box-sizing: border-box;

    }
    .EnergyConsumption_content_left_border{
        width: 100%;
        flex: 1;
        /*height: 60%;*/
        /*border:1px solid #0086b3;*/
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .EnergyConsumption_content_left_table {
        padding-bottom: 1em;
    }

    .EnergyConsumption_content_left_table p{
        text-align: center;
    }
    table tr{
        width: 100%;

    }
    tr td{
        width: 150px;
        height: 20px;
        text-align: center;
    }
    .EnergyConsumption_content_right_border{
        /*border:1px solid #0086b3;*/
        height: 48%;
        width: 100%;
    }
    .EnergyConsumption_content_right_column{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
